<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <!-- 功能区 -->
        <div style="margin: 10px 0">
          <!-- 搜索区 -->
          <div style="margin: 10px 0">
            <el-input
              v-model="search"
              clearable
              placeholder="菜单名称"
              prefix-icon="Search"
              style="width: 20%"
            />
            <el-button
              icon="Search"
              style="margin-left: 5px"
              type="primary"
              @click="load"
            ></el-button>
            <el-button
              icon="refresh-left"
              style="margin-left: 10px"
              type="default"
              @click="reset"
            ></el-button>
            <div style="float: right">
              <el-tooltip content="添加" placement="top">
                <el-button
                  icon="plus"
                  style="width: 50px"
                  type="primary"
                  @click="add"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="title" label="菜单名称" sortable width="180">
          </el-table-column>
          <el-table-column prop="type" label="菜单类型" sortable width="180">
            <template v-slot:default="scope">
              <el-tag v-if="scope.row.type == '0'">标签一</el-tag>
              <el-tag v-if="scope.row.type == '1'" type="success"
                >标签二</el-tag
              >
              <el-tag v-if="scope.row.type == '2'" type="danger">标签三</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="icon" label="菜单图标">
            <template v-slot:default="scope">
              <el-icon>
                <component :is="scope.row.icon"></component>
              </el-icon>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="路由名称"></el-table-column>
          <el-table-column prop="path" label="路由地址"></el-table-column>
          <el-table-column prop="url" label="组件路径"></el-table-column>
          <el-table-column prop="code" label="权限字段"></el-table-column>
          <el-table-column prop="orderNum" label="菜单序号"></el-table-column>
          <!--      操作栏-->
          <el-table-column v-if="role != 'stu'" label="操作" width="130px">
            <template #default="scope">
              <el-button
                icon="Edit"
                type="primary"
                @click="handleEdit(scope.row)"
              ></el-button>
              <el-popconfirm
                title="确认删除？"
                @confirm="handleDelete(scope.row.id)"
              >
                <template #reference>
                  <el-button icon="Delete" type="danger"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--      弹窗-->
        <div>
          <el-dialog
            v-model="dialogVisible"
            title="操作"
            width="40%"
            @close="cancel"
          >
            <el-form
              ref="addModel"
              :model="addModel"
              :rules="rules"
              label-width="120px"
            >
              <el-row :gutter="20">
                <el-col :span="24" :offset="0">
                  <el-form-item label="菜单类型">
                    <el-radio-group v-model="addModel.type">
                      <el-radio label="0">目录</el-radio>
                      <el-radio label="1">菜单</el-radio>
                      <el-radio label="2">按钮</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="上级菜单" prop="parentName">
                    <el-input
                      @click="add2"
                      v-model="addModel.parentName"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="菜单名称" prop="title">
                    <el-input
                      v-model="addModel.title"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col v-if="addModel.type != '2'" :span="12" :offset="0">
                  <el-form-item label="菜单图标" prop="icon">
                    <el-input
                      v-model="addModel.icon"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col v-if="addModel.type != '2'" :span="12" :offset="0">
                  <el-form-item label="路由名称" prop="name">
                    <el-input
                      v-model="addModel.name"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="菜单序号" prop="orderNum">
                    <el-input
                      v-model="addModel.orderNum"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12" :offset="0">
                  <el-form-item label="权限字段" prop="code">
                    <el-input
                      v-model="addModel.code"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col v-if="addModel.type == '1'" :span="12" :offset="0">
                  <el-form-item label="组件路径" prop="url">
                    <el-input
                      v-model="addModel.url"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col v-if="addModel.type != '2'" :span="12" :offset="0">
                  <el-form-item label="路由地址" prop="path">
                    <el-input
                      v-model="addModel.path"
                      clearable
                      style="width: 80%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        <!-- 上级菜单弹框属性 -->
        <!--      弹窗-->
        <div>
          <el-dialog
            v-model="dialogVisible2"
            title="操作"
            width="40%"
            @close="cancel2"
          >
            <el-tree
              :data="parentData"
              :props="parentDefaultProps"
              @node-click="parentHandleNodeClick"
            >
            </el-tree>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel2">取 消</el-button>
                <el-button type="primary" @click="onParentConfirm"
                  >确 定</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
const { ElMessage } = require("element-plus");
export default {
  data() {
    return {
      loading: true, // 控制加载状态
      disabled: false, // 是否禁用某些表单项
      judge: false, // 判断当前是新增还是编辑状态
      dialogVisible: false, // 控制弹窗显示状态
      dialogVisible2: false, // 控制菜单弹窗显示状态

      search: "", // 搜索框的内容
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示的数据条数
      total: 0, // 数据的总条数

      //用来存放点击选择的菜单的数据
      selectNode: {
        menuId: "",
        title: "",
      },
      parentDefaultProps: {
        children: "children",
        label: "title",
      },
      parentData: [], //定义上级菜单数据
      tableData: [],
      form: {}, // 存放表单数据

      date: [], // 用于存放日期筛选范围
      addModel: {
        editType: "",
        id: "",
        parentId: "null",
        title: "",
        code: "",
        name: "",
        path: "",
        url: "",
        type: "",
        icon: "",
        parentName: "",
        orderNum: "",
      },
      rules: {
        // 表单校验规则
        parentName: [
          { required: true, message: "请选择上级菜单", trigger: "blur" },
        ],
        title: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
        // code: [{ required: true, message: "请填写权限字段", trigger: "blur" }],
        // name: [{ required: true, message: "请填写路由名称", trigger: "blur" }],
        path: [
          // { required: true, message: "请填写路由名称地址", trigger: "blur" },
        ],
        url: [{ required: true, message: "请填写组件路径", trigger: "blur" }],
        type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
        //  icon: [
        //   { required: true, message: "请填菜单图表", trigger: "blur" },
        // ],
        //  parentName: [
        //   { required: true, message: "请填写路由名称", trigger: "blur" },
        // ],
        // orderNum: [
        //   { required: true, message: "请填写路由名称", trigger: "blur" },
        // ],
      },
    };
  },
  created() {
    this.getList();

    setTimeout(() => {
      // 设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {
    //上级菜单单击事件
    parentHandleNodeClick(node) {
      console.log(node);
      this.selectNode.menuId = node.id;
      this.selectNode.title = node.title;
    },
    //选择上级菜单
    async selectParent() {
      request.get("/menu/parent", {}).then((res) => {
        console.log("上级菜单");
        console.log(res);
        this.parentData = res.data; // 表格数据
        this.loading = false; // 关闭加载状态
      });
      //查询树的数据
      this.parentDialog.visible = true;
    },
    //上级菜单点击确定
    onParentConfirm() {
      this.addModel.parentId = this.selectNode.menuId;
      this.addModel.parentName = this.selectNode.title;
      console.log(this.addModel.parentName);
      console.log(this.addModel);
      this.dialogVisible2 = false; // 关闭弹窗
      console.log(this.addModel);
    },
    // // 加载数据的方法
    // async getParentList() {
    //   request
    //     .get("/menu/parent", {
    //       params: {
    //         pageNum: this.currentPage, // 当前页码
    //         pageSize: this.pageSize, // 每页显示的条数
    //         search: this.search, // 搜索关键字
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res);
    //       this.parentData = res.data; // 表格数据
    //       this.loading = false; // 关闭加载状态
    //     });
    // },
    // 加载数据的方法
    async getList() {
      request
        .get("/menu/list", {
          params: {
            pageNum: this.currentPage, // 当前页码
            pageSize: this.pageSize, // 每页显示的条数
            search: this.search, // 搜索关键字
          },
        })
        .then((res) => {
          this.tableData = res.data; // 表格数据
          this.loading = false; // 关闭加载状态
        });
    },
    async load() {
      request
        .get("/menu/find", {
          params: {
            pageNum: this.currentPage, // 当前页码
            pageSize: this.pageSize, // 每页显示的条数
            search: this.search, // 搜索关键字
          },
        })
        .then((res) => {
          this.tableData = res.data; // 表格数据
          console.log("table", this.tableData);
          this.loading = false; // 关闭加载状态
        });
    },
    // 重置搜索框和日期范围
    reset() {
      this.search = "";
      this.date = [];
    this.getList();
    },
    // 取消操作
    cancel() {
      this.dialogVisible = false; // 关闭弹窗
    },
    // 显示添加弹窗
    add() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.disabled = false; // 启用表单项
        this.addModel = {}; // 清空表单数据
        this.judge = false; // 设置为新增状态
      });
    },
    // 显示菜单弹窗
    add2() {
      this.dialogVisible2 = true;
      this.selectParent();
      this.$nextTick(() => {
        this.disabled = false; // 启用表单项
        this.addModel = {}; // 清空表单数据
      });
    },
    // 取消操作
    cancel() {
      this.$refs.addModel.resetFields(); // 重置表单
      this.dialogVisible = false; // 关闭弹窗
    },
    // 取消操作
    cancel2() {
      this.dialogVisible2 = false; // 关闭弹窗
    },
    // 保存数据
    save() {
      this.$refs.addModel.validate(async (valid) => {
        if (valid) {
          if (this.judge === false) {
            // 新增
            console.log(this.addModel);
            const res = await request.post("/menu/add", this.addModel);
            console.log(res);
            if (res.code === "0") {
              ElMessage({
                message: "新增成功", // 提示信息
                type: "success",
              });
              this.dialogVisible = false; // 关闭弹窗
              this.getList(); // 重新加载数据
            } else {
              ElMessage({
                message: res.msg, // 错误提示信息
                type: "error",
              });
            }
          } else {
            // 修改
            const res = await request.put("/menu/update", this.addModel);
            console.log(res);
            if (res.code === "0") {
              ElMessage({
                message: "修改成功", // 提示信息
                type: "success",
              });
              this.dialogVisible = false; // 关闭弹窗
              this.getList(); // 重新加载数据
            } else {
              ElMessage({
                message: res.msg, // 错误提示信息
                type: "error",
              });
            }
          }
        }
      });
    },
    // 删除操作
    async handleDelete(id) {
      console.log(id);
      request.delete("/menu/delete/" + id).then((res) => {
        if (res.code === "0") {
          ElMessage({
            message: "删除成功", // 提示信息
            type: "success",
          });
          this.search = ""; // 清空搜索框
          this.getList(); // 重新加载数据
        } else {
          ElMessage({
            message: res.msg, // 错误提示信息
            type: "error",
          });
        }
      });
    },

    // 编辑操作
    handleEdit(row) {
      // 设置为编辑状态
      this.judge = true;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addModel.resetFields(); // 重置表单
        this.addModel = JSON.parse(JSON.stringify(row)); // 复制当前行数据
        this.disabled = true; // 禁用表单项
      });
    },

    handlePageSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },

    handleCurrentPageChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
  },
};
</script>

<style  scoped>
.icon {
  margin-right: 1px;
}
.el-button {
  margin-left: 10px;
}
</style>